<template>
  <div class="database-left">
    <div class="data-scan box">
      <moduleLeft title="民政政策">
        <div class="content">
          <ul>
            <li v-for="(item, index) in list" :key="index">
              <p>{{ item.name }}</p>
              <span @click="scanPolicy(item.refId)">查看</span>
            </li>
          </ul>
        </div>
      </moduleLeft>
    </div>
    <div class="person-list box">
      <moduleLeft title="数据列表">
        <div class="content">
          <el-table
            :data="personList"
            height="100%"
            border
            class="table"
            ref="scrollTablleRef"
            @mouseenter.native="autoScroll(true)"
            @mouseleave.native="autoScroll(false)"
          >
            <el-table-column
              prop="userName"
              label="姓名"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
              width="80"
            >
            </el-table-column>
            <el-table-column
              prop="userSex"
              label="性别"
              align="center"
              width="50"
            >
            </el-table-column>
            <el-table-column
              prop="userType"
              label="身份标签"
              align="center"
              show-overflow-tooltip
              :tooltip-effect="'dark'"
            >
            </el-table-column>
            <el-table-column label="操作" align="center" width="60">
              <template slot-scope="scope">
                <span class="operate-text" @click="onDeatil(scope.row)"
                  >详情</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </moduleLeft>
    </div>
    <!-- <div class="sex-analysis box">
      <div class="more" @click="onBroadCastInfo">展开</div>
      <moduleLeft title="社区播报">
        <div class="content">
          <comBroadcast></comBroadcast>
        </div>
      </moduleLeft>
    </div> -->
    <!-- <vue-office :file="wordFile" /> -->
  </div>
</template>

<script>
import { mixins } from "./js/mixins";
import comBroadcast from "@/components/database/comBroadcast.vue";
import axios from "axios";
// import VueOffice from "vue-office";
// import docx from "docx-preview";
export default {
  name: "databaseLeft",
  mixins: [mixins],
  components: {
    comBroadcast,
  },
  data() {
    return {
      tableData: [],
      list: this.$store.state.policys,
      personList: [],
      scrollTimer: null,
      isShowPop: false,
      // wordFile: null,
    };
  },
  mounted() {
    // this.initSexAnalysis();
    // this.initAgeRatio();
    this.getPersonInfo();
  },
  beforeDestroy() {
    this.autoScroll(true);
  },
  methods: {
    // initSexAnalysis() {
    //   let xdata = ["男", "女"];
    //   let ydata = [1048, 735];
    //   this.setSexAnalysis({ xdata, ydata }, "sex-analysis-chart");
    // },
    initAgeRatio() {
      let xdata = ["20岁以下", "20-30岁", "30-40岁", "40-50岁", "50岁以上"];
      let ydata = [40, 38, 32, 30, 28];
      this.setAgeRatio({ xdata, ydata }, "age-ratio-chart");
    },
    scanPolicy(url) {
      let fileUrl = this.$store.state.prefixFile + url;
      window.open(fileUrl);
      // fetch(fileUrl)
      //   .then((response) => response.arrayBuffer())
      //   .then((arrayBuffer) => {
      //     docx
      //       .renderAsync(arrayBuffer, this.$refs.officeContainer)
      //       .then((office) => {
      //         this.wordFile = office;
      //       })
      //       .catch((error) => {
      //         console.error("Error rendering .docx file:", error);
      //       });
      //   });
    },
    // 人员类型综合信息
    getPersonInfo() {
      axios
        .get("/hanfeng-large-screen/json/index_user_list.json")
        .then((res) => {
          if (res.errcode == 0) {
            this.personList = res.data.list ?? [];
            this.autoScroll();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 设置自动滚动
    autoScroll(stop) {
      const table = this.$refs.scrollTablleRef;
      // 拿到表格中承载数据的div元素
      const divData = table.$refs.bodyWrapper;
      if (stop) {
        window.clearInterval(this.scrollTimer);
      } else {
        if (!this.isShowPop) {
          this.scrollTimer = window.setInterval(() => {
            divData.scrollTop += 1;
            if (
              divData.clientHeight + divData.scrollTop ==
              divData.scrollHeight
            ) {
              divData.scrollTop = 0;
            }
          }, 150); //滚动速度
        }
      }
    },
    onDeatil(row) {
      this.isShowPop = true;
      this.$emit("openElecPopup", row, "personal");
    },
    // 弹窗查看社区播报全部信息
    onBroadCastInfo() {
      this.$emit("openBroadCast");
    }
  },
};
</script>

<style scoped lang="scss">
.database-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .data-scan {
    width: 100%;
    height: 30%;
    .content {
      height: 100%;
      > ul {
        width: 100%;
        height: 100%;
        overflow: auto;
        > li {
          list-style: none;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.12rem;
          color: #fff;
          padding: 0.2vh 0;
          margin-bottom: 0.2vh;
          > p {
            width: calc(100% - 2vw);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          > span {
            padding-right: 0.5vw;
            color: #0ff;
            cursor: pointer;
          }
        }
        > li:last-child {
          margin-bottom: 0;
        }
        > li:hover {
          background-color: #27508b;
        }
      }
    }
  }
  .person-list {
    width: 100%;
    height: 69%;
    .content {
      height: calc(100% - 0px);
    }
  }
  .sex-analysis {
    width: 100%;
    height: 28%;
    position: relative;
    .more {
      position: absolute;
      right: 1vw;
      top: 0.3vh;
      color: #0ff;
      font-family: "YouSheBiaoTiHei";
      font-size: 0.18rem;
      cursor: pointer;
    }
    .content {
      height: calc(100% - 0px);
    }
  }
}
</style>
